<template>
	<view>
		<!-- {{itemInfo}} -->
		<view class="goods-item" @click="goodsitemClick">
			<!-- #ifndef H5 -->
			<image class="image" :lazy-load="true" :src="itemInfo.pic_url" mode="widthFix"></image>
			<!-- #endif -->
			<!--  npm i vue3-lazy -S  h5的图片懒加载 要用第三方包 -->
			<!-- #ifdef H5 -->
			<img  class="image" v-lazy="itemInfo.pic_url" >
			<!-- #endif -->
			<view class="desc-info">
				<view class="title">
					{{itemInfo.title_long }}
				</view>
				<view class="info">
					<text class="price">￥{{itemInfo.cprice }}</text>
					<image class="icon" src="@/static/images/common/favor.png" mode=""></image>
					<text class="cfav">45</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
const	props=defineProps({
		itemInfo: {
			type: Object,
			default: {}
		}
	})
	const emit=defineEmits(['gooditemClick'])
	function goodsitemClick(){
		emit('gooditemClick',props.itemInfo)
	}
</script>

<style lang="scss">
	// 先挑图片 因为图片有默认宽高
.goods-item{
	box-sizing: border-box;
	padding: 10rpx;
	.image{
		border-radius: 20rpx;
		width: 100%;
	}
	.desc-info{
		.title{
			// 一行显示
			white-space: nowrap;
			
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.info{
			text-align: center;
			margin-top: 10rpx;
			.price{
				color:$gPrimaryColor ;
				margin: 0 10rpx;
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				color:$gPrimaryColor ;
				position: relative;
				top: 3rpx;
				margin: 0 5rpx;
			}
			.cfav{
				
			}
		}
	}
}
</style>
